<template>
	<div>
		<header class="aui-header" style="display: none;">
			<a class="aui-pull-left aui-btn">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">查看物流</div>
		</header>
		<div class="logistmain">
			<div class="goodinfo">
				<div class="goodimg"><img :src="logistjson.mainImageUrl"></div>
				<div class="goodfont">
					<p v-if="logistjson.state == 1">待付款</p>
					<p v-else-if="logistjson.state == 2">已付款</p>
					<p v-else-if="logistjson.state == 3">待发货</p>
					<p v-else-if="logistjson.state == 4">已发货</p>
					<p v-else-if="logistjson.state == 5">待评价</p>
					<p v-else-if="logistjson.state == 6">换货中</p>
					<p v-else-if="logistjson.state == 7">换货成功</p>
					<p v-else-if="logistjson.state == 8">退货中</p>
					<p v-else-if="logistjson.state == 9">退货成功</p>
					<p v-else-if="logistjson.state == 10">维修中</p>
					<p v-else-if="logistjson.state == 11">维修成功</p>
					<p v-else-if="logistjson.state == 12">退款中</p>
					<p v-else-if="logistjson.state == 13">退款成功</p>
					<p v-else-if="logistjson.state == 14">订单异常</p>
					<p v-else-if="logistjson.state == 15">锁定订单</p>
					<p v-else-if="logistjson.state == 16">关闭订单</p>
					<p v-else-if="logistjson.state == 17">已完成</p>
					<p>{{logistjson.expressName}} {{logistjson.expressNo}}</p>
					<p>承运人电话：{{logistjson.expressPhone}}</p>
				</div>
			</div>
			<div class="logistcon">
				<mu-timeline>
					<mu-timeline-item v-for="item in logistjson.expressList">
						<span slot="time">{{item.datetime}}</span>
						<span slot="des">{{item.remark}}</span>
					</mu-timeline-item>
					
				</mu-timeline>
			</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { wuliu } from '../Baseurl/common.js';
	export default {
		data() {
			return {
				logistjson:[]
			}
		},
		created() {
			var href = window.location.href
			var url = BaseUrl+wuliu+'?'+href.split('?')[1];
			console.log(url)
			this.$http.get(url).then(res => {
//				var json = res.data.data.expressList.reverse();
//				
//				this.logistjson = res.data.data;
//				
//				console.log(res.data.data,json);

				if(res.data.data.expressList == undefined){
					Toast({
						message: "为找到物流信息",
						position: 'middle',
						duration: 3000
					});
				}else{
					var json = res.data.data.expressList.reverse();		
					this.logistjson = res.data.data;
				}
				
			})
		}
	}
</script>

<style scoped="scoped">
	.logistmain {
		/*margin-top: 1rem;*/
		width: 100%;
	}
	
	.goodinfo {
		padding: 0.15rem 0.25rem;
		background: #ffff;
		font-size: 0;
	}
	
	.goodimg {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
	}
	.goodimg>img{
		width: 100%;
		height: 100%;
	}
	.goodfont {
		display: inline-block;
		width: 78%;
		float: right;
		text-align: left;
	}
	
	.goodfont>p {
		color: #323232;
		font-size: 0.28rem;
	}
	
	.logistcon {
		padding: 0.25rem;
		background-color: #FFFFFF;
		margin-top: 0.16rem;
	}
	.logiststate{
		margin-left: 0.2rem;
		color: #FF2040;
	}
	
</style>